<template>
  <nav>
    <ul>
      <li 
        v-for="item in items" 
        :key="item.type"
        :class="{ active: active === item.type }"
        @click="handleSelect(item.type)"
      >
        {{ item.title }}
      </li>
    </ul>
  </nav>
</template>

<script setup>
const props = defineProps({
  items: Array,
  active: String
})

const emit = defineEmits(['select'])

const handleSelect = (type) => {
  emit('select', type)
}
</script>

<style lang="scss" scoped>
nav {
  ul {
    list-style: none;
    padding: 0;
    
    li {
      padding: 0.8rem 1rem;
      cursor: pointer;
      transition: background 0.3s;
      
      &:hover {
        background: #f5f5f5;
      }
      
      &.active {
        background: #1867CA;
        color: white;
      }
    }
  }
}
</style>